<template>
    <button type="button">
       <h1>{{number}}</h1>
       <h3>{{state}}</h3>
    </button>
</template>

<script>
    export default {
        name:"StateCard",
        props:{
            /**
             * 数字
             */
            number:Number,
            /**
             * 状态
             */
            state:String,
        }
    }
</script>

<style lang="scss" scoped>
button{
    display: block;
    outline: 0px solid rgba(221, 221, 221, 0.5);
    border: none;
    padding: 6px 12px;
    color: #212529;
    background: #f8f9fa;
    transition: 0.15s linear;
    border-radius: 3px;
    width: 100%;
    //鼠标小手
    cursor: pointer;
    h1{
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        margin-bottom: 10px;
    }
    h3{
        font-size: 13px;
        font-weight: 400;
        color: #6c757d !important;
        margin: 0;
    }
    &:focus{
        background: #e2e6ea;
        outline-width: 5px ;
    }
}
</style>